<template>
    <div class="text">
        <el-form :model="form.data" label-width="auto" ref="formRef" :rules="rules">
            <el-form-item label="标题名称" prop="title">
                <el-input v-model="form.data.title" placeholder="请填写标题名称" maxlength="10" show-word-limit />
            </el-form-item>
            <el-form-item label="描述内容">
                <el-input v-model="form.data.description" placeholder="请填写描述内容" maxlength="30" show-word-limit />
            </el-form-item>
            <div class="square"></div>
            <el-form-item label="显示位置">
                <el-radio-group v-model="form.data.position">
                    <el-radio-button :label="1">居左显示</el-radio-button>
                    <el-radio-button :label="2">居中显示</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="标题颜色">
                <div class="setcolor">
                    <el-color-picker v-model="form.data.titleColor" />
                    <img src="@/assets/imgs/mall/decorate/edit.png" class="setimg" />
                    <div class="reset" @click="resetColor(0)">重置</div>
                </div>
            </el-form-item>
            <el-form-item label="描述颜色">
                <div class="setcolor">
                    <el-color-picker v-model="form.data.descColor" />
                    <img src="@/assets/imgs/mall/decorate/edit.png" class="setimg" />
                    <div class="reset" @click="resetColor(1)">重置</div>
                </div>
            </el-form-item>
            <div class="square"></div>
            <el-form-item label="" label-width="0">
                <el-checkbox v-model="form.data.show">显示&nbsp;&nbsp;查看更多</el-checkbox>
            </el-form-item>
            <el-form-item label="文本内容" prop="content" v-if="form.data.show">
                <el-input v-model="form.data.content" placeholder="请填写文本内容" maxlength="10" show-word-limit />
            </el-form-item>
        </el-form>
        <el-form :model="form.selectParam" label-width="auto" ref="formRefTwo">
            <MutualChoose
                :typeList="typeList"
                :category="categoryList"
                @sendParam="getParamList($event, index)"
                :row="form.selectParam"
                v-if="form.data.show" />
            <el-form-item label="文本颜色" v-if="form.data.show">
                <div class="setcolor">
                    <el-color-picker v-model="form.data.textColor" />
                    <img src="@/assets/imgs/mall/decorate/edit.png" class="setimg" />
                    <div class="reset" @click="resetColor(2)">重置</div>
                </div>
            </el-form-item>
            <div class="square"></div>
            <dev class="space-title">模块间隙</dev>
            <el-form-item label="" label-width="0" style="margin-top: 20px">
                <el-slider v-model="form.data.space" :step="1" :max="20"> </el-slider>
                <el-input
                    style="width: 58px; margin-left: 8px"
                    v-model="form.data.space"
                    @change="changeSpace"
                    type="number"
                    onkeyup="value=value.replace(/[^\d]/g,'')" />
                <span style="margin-left: 8px">像素</span>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup>
import { ref, reactive, watch } from 'vue';
import MutualChoose from '@/components/MutualChoose.vue';
import storage from '@/commons/storage';
import request from '@/request';
const props = defineProps(['comIndex', 'components', 'tabparam']);

const emit = defineEmits(['changeSetting']);
let formRef = ref();
let formRefTwo = ref();
const categoryList = ref([]);
let form = reactive({
    data: {
        space: 0,
        title: '标题名称',
        position: 1,
        description: '描述内容',
        titleColor: '#333333',
        descColor: '#666666',
        textColor: '#666666',
        content: '查看更多',
        show: true
    },
    selectParam: {
        name: '',
        mutual: '',
        page: '',
        imgurl: '',
        id: '',
        chooseName: '',
        url: '',
        openimg: ''
    }
});
const typeList = ref([]);
const getTypeList = () => {
    request('templateMutual', { channel: 'page' }).then(res => {
        typeList.value = res.data;
    });
};
getTypeList();
//分类分组数据
const getCategoryList = async () => {
    let cate = await request('queryCategoryListServ', { shopId: storage.get('ZW-SHOPID') });
    Object.assign(categoryList.value, cate?.data?.list || []);
};
getCategoryList();
const getParamList = param => {
    Object.assign(form.selectParam, param);
};
let allitem = ref([]);
const changeSpace = () => {
    form.data.space = Number(form.data.space);
};
const rules = reactive({
    title: [{ required: true, message: '请输入标题名称', trigger: 'blur' }],
    content: [{ required: true, message: '请输入文本内容', trigger: 'blur' }]
});
const resetColor = index => {
    let colorList = { titleColor: '#333333', descColor: '#666666', textColor: '#666666' };
    let keys = Object.keys(colorList)[index];
    form.data[keys] = colorList[keys];
};
watch(
    () => form.data,
    val => {
        if (!form.data.show) {
            form.selectParam = {
                name: '',
                mutual: '',
                page: '',
                imgurl: '',
                id: '',
                chooseName: '',
                url: '',
                openimg: ''
            };
            form.data.content = '查看更多';
            form.data.textColor = '#666666';
        }
        emit('changeSetting', {
            ...form.data,
            ...form.selectParam,
            name: 'text',
            index: props.comIndex ? props.comIndex : 0
        });
    },
    {
        deep: true
    }
);
watch(
    () => form.selectParam,
    val => {
        emit('changeSetting', {
            ...form.data,
            ...form.selectParam,
            name: 'text',
            index: props.comIndex ? props.comIndex : 0
        });
    },
    {
        deep: true
    }
);
watch(
    () => props.comIndex,
    val => {
        allitem.value = props.components;
        if (allitem.value.length) {
            form.data = allitem.value[val].options;
        } else {
            form.data = {
                space: 0,
                title: '标题名称',
                description: '描述内容',
                position: 1,
                titleColor: '#333333',
                descColor: '#666666',
                textColor: '#666666',
                content: '查看更多',
                show: true
            };
        }
    },
    { immediate: true }
);
watch(
    () => props.components,
    val => {
        if (val.length && Object.keys(val[props.comIndex].options).length) {
            Object.keys(form.data).map(item => {
                form.data[item] = val[props.comIndex].options[item];
            });
            Object.keys(form.selectParam).map(item => {
                form.selectParam[item] = val[props.comIndex].options[item];
            });
        } else {
            form.data = {
                space: 0,
                title: '标题名称',
                description: '描述内容',
                position: 1,
                titleColor: '#333333',
                descColor: '#666666',
                textColor: '#666666',
                content: '查看更多',
                show: true
            };
            form.selectParam = {
                name: '',
                mutual: '',
                page: '',
                imgurl: '',
                id: '',
                chooseName: '',
                url: '',
                openimg: ''
            };
        }
    },
    { immediate: true, deep: true }
);
</script>
<style lang="scss" scoped>
:deep(.el-slider) {
    width: 200px;
}
:deep(.el-color-picker__trigger) {
    width: 190px;
    padding-right: 34px;
    z-index: 199;
}
:deep(.el-color-picker__color) {
    border: none;
}
:deep(.el-color-picker__icon) {
    display: none;
}
.text {
    margin-top: 24px;
}
.square {
    border-top: 1px solid rgba(234, 234, 234, 1);
    margin-bottom: 24px;
}
.setcolor {
    position: relative;
    z-index: 199;
    .setimg {
        position: absolute;
        z-index: 100;
        right: 10px;
        width: 14px;
        height: 14px;
        top: 50%;
        margin-top: -9px;
    }
    .reset {
        position: absolute;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ff6b00;
        right: -40px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }
}
.space-title {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #33302d;
    line-height: 14px;
    margin-bottom: 24px;
}
</style>
